<template>
  <div ref="radarChart2" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  name: 'BarChart',
  setup() {
    const radarChart2 = ref()
    const state = reactive({
      option: {
        grid: {
          top: '14%',
          left: '2%',
          right: '15%',
          bottom: '0%',
          containLabel: true,
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '运费', max: 6500 },
            { name: '时间', max: 16000 },
            { name: '船队利润率', max: 30000 },
            { name: '贸易利润率', max: 38000 },
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000,],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000],
                name: 'Actual Spending'
              }
            ]
          }
        ],
      },
    })
    const initeCharts = () => {
      let myChart = echarts.init(radarChart2.value)
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
      radarChart2
    }
  },
})
</script>

<style scoped>

</style>
